<template>
  <div class="appointment-pay">
    <nav-top :title="'['+order.body+']-结算'" :goback="true"></nav-top>
    <div class="pay-info">
      <p class="pay-sum">
        人民币
        <span style="color:#06A44F">￥{{ order.total_fee/100 }} 元 </span>
      </p>
      <p class="pay-type-label">支付方式</p>
      <!-- <van-icon name="/static/icon/appointment/.png" /> -->
      <van-radio-group v-model="payType">
        <van-cell-group :border="false">
          <van-cell class="pay-type" :border="false" clickable @click="payType = '1'">
            <img src="/static/icon/appointment/pay-wx.png" slot="icon" />
            <p slot="title">微信支付</p>
            <van-radio checked-color="#1BA253" name="1" />
          </van-cell>
          <van-cell class="pay-type" :border="false" clickable @click="payType = '2'">
            <img src="/static/icon/appointment/pay-help.png" slot="icon" />
            <p slot="title">找人代付</p>
            <van-radio checked-color="#1BA253" name="2" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <div class="submit">
      <van-button class="submit-btn" type="primary" :loading="btn.loading"  :disabled="btn.text=='支付' ? false : true" size="large" @click="pay">{{ btn.text }}</van-button>
    </div>
    <!--
    <div class="read-text">
      <p class="read-label">/p>
      <p class="read-value">
        
      </p>
      
      <p class="read-value">
        如果您在
        <span>2019-09-19 23:59(北京时间)</span>或者之前更改或取消预订，则不需支付任何费用。
        <br />如果您在
        <span>2019-09-19 23:59(北京时间)</span>之后更改或取消预约，则需支付20%原消费费用的手续费。
      </p>
      <p class="read-label">更改日期</p>
      <p class="read-value">请于约定时间前3个工作日致电利佳或联系利佳微信客服更改您的预约日期，我们将在与医疗机构确认后重新发出确认信息，利佳将不收取任何改期费用。</p>
      <p class="read-label">取消预约</p>
      <p class="read-value">
        如预约产品服务后需取消预约，请通过利佳健康平台进行操作或
        拨打客服热线通知利佳。在利佳确认您预约成功之前，您可免费
        取消本次服务。在利佳确认您预约成功之后，您有可能法获得全
        额退款，详情可阅读****协议。如若您多次未赴约，我们会将此
        视为恶意行为，这将会影响您在利佳网及利佳合作机构所享受的
        奖励与权限。
      </p>
      <p class="read-value">
        注：若有需要，我们可以向您开具商业收据，利佳健康和医疗中
        心为香港机构，不能向您开具内地增值税发票。
        点击“支付”，即表示您确认已阅读并接受我们的
        <a>条款和条件</a>以及
        <a>隐私政策</a>
      </p>
      
    </div>
    -->
    <van-popup v-model="payHelp">
      <img class="pay-help-code" :src="agencyqrurl" />
    </van-popup>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";
import wxpay from "./pay"

import { paymember, wxpayjsapi, domain, wxjssdk, orderstatus } from './../../libs/api_v1'
import { OrderInfo, search } from './../../libs/api'


export default {
  components: {
    NavTop
  },
  name: "AppointmentPay",
  data() {
    return {
      payType: '1',
      payHelp: false,
      ordershow:false,
      agencyqrurl:'',
      order:{
        total_fee:'',
        body:'',
        order_no:''
      },
      title:'',
      desc:'',
      btn:{
        text:'支付',
        color:'',
        loading:false
      }
    };
  },
  methods: {
    back:function(){
      this.$router.back(-1)
    },
    pay:function(spc){
      const wechatPay = () => {
        this.btn.loading = true
        const wxPayCall = (res) => {
          console.log(res)
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
            fetch(domain+'/api/order/status?order_no='+ search("order_no")+"&hl="+search("hl"), {
              headers: {
                  'authtoken': this.$cookies.get("authtoken"),
              },
              method: 'POST', // *GET, POST, PUT, DELETE, etc.
              mode: 'cors', // no-cors, cors, *same-origin
              redirect: 'follow', // manual, *follow, error
              referrer: 'no-referrer', // *client, no-referrer
            })
            .then((res)=> res.json())
            .then((res)=>{
              if(res.code==1){
                // 支付完成
                this.btn.text = '查看订单' // 直接跳转结果页 bb
                // window.location.href = search('calluri')+'?order_no='+search("order_no")+"&hl="+search("hl")
                window.location.href = res.data.call_using_url+'?order_no='+res.data.order_no
              }else{
                this.desc = res.err
              }
              this.btn.loading = false
              this.$dialog.alert({
                title: '提示',
                message: res.msg
              })
              this.title = res.msg
            })
            .catch((err)=>{
              this.btn.loading = false
              this.btn.text = '重试'
              this.title = err
              this.$dialog.alert({
                title: '提示',
                message: err
              })
                this.desc = '检查订单状态错误，您可以进入订单列表查看订单状态'
            })
            
          }else{
            this.$notify({ type: 'danger', message: "支付失败"})
            this.btn.loading = true
          }
        }
        wxpayjsapi(search("order_no"),this.$cookies.get("authtoken"), domain+"/api/member/order/notify")
        .then((resp)=>{
          var res = resp.data
          this.title = res.err
          this.desc = ''
          if(res.code==1){
              wxpay(res.data, wxPayCall)
            }else{
              // this.btn.loading = false
              this.$notify({ type: 'danger', message: res.err })
            }
            // this.btn.loading = false
        })
        .catch((err)=>{
          this.btn.loading = false
          this.$notify({ type: 'danger', message: err })
        })
      }
      if(this.payType == '1'){
        console.log("微信支付")
        wechatPay()
      }else if(this.payType == '2'){
        this.btn.loading = false
        this.payHelp = true
        var agencyuri = domain + '/pay/mainlandagency?order_no='+search("order_no")
        this.agencyqrurl = 'http://www.likehealth.com.cn/qr/?url=https:'+agencyuri
      }
    },
    done:function(){
      if(search('calluri')){
        window.location.href = search('calluri')+'?order_no='+search("order_no")
        return
      }
      window.location.href = '/user/self'
    },
  },
  created: function(){
    OrderInfo(search("order_no"))
    .then((resp)=>{
      var res = resp.data
      if(res.code == 1){
        this.ordershow = true
        this.order = res.data
        if(res.data.status == 2){ // 已支付
          this.btn.text = "已经支付"
        }else if(res.data.status == 3) { // 订单已被取消
          this.btn.text = "订单已被取消"
        }else{
          this.title = res.data.body
          this.btn.text = "支付"
        }
      }else{
        this.btn.text = res.msg
      }
    })
    .catch((err)=>{
      this.btn.text = err
    })
  }
}
</script>
<style lang='scss' scoped>
.appointment-pay {
  background-color: #f5f5f7;
  p {
    color: #000;
    font-size: 12px;
    font-family: Microsoft YaHei;
    line-height: 1em;
    margin: 0;
  }
  .pay-info {
    margin-top: 46px;
    padding: 14px 10px 0 10px;
    background-color: #fff;
    p {
      padding-bottom: 16px;
      border: none;
      span {
        padding-left: 23px;
      }
    }
    .pay-sum {
      padding-bottom: 15px;
      border-bottom: 1px solid #f5f5f5;
    }
    img {
      width: 23px;
      height: 23px;
    }
    .pay-type-label {
      padding-top: 16px;
    }
    .pay-type {
      padding: 5px 0 5px 0;
      p {
        padding-top: 5px;
        padding-left: 9px;
      }
    }
  }
  .submit {
    padding: 0 9px;
    .submit-btn {
      margin-top: 30px;
      margin-bottom: 19px;
      height: 41px;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 1px;
      background-color: #06a44f;
      border-color: #06a44f;
      border-radius: 6px;
    }
  }
  .read-text {
    .read-label {
      padding-left: 10px;
      padding-bottom: 10px;
    }
    .read-value {
      padding: 0 20px 13px 16px;
      color: #666;
      font-size: 10px;
      line-height: 2em;
      span,
      a {
        color: #07a34f;
      }
    }
  }
  .pay-help-code {
    width: 255px;
    height: 255px;
  }
}
</style>
